<template>
  <div class="reg-container">

    <div class="login-form" v-loading="pageLoading">
      <a class="login-route" @click="gologin" href="javascript:">返回登录</a>
      <a class="login-route-2" @click="searchVerify" href="javascript:">查询认证进度</a>
      <div class="title-container filter-container">
        <div class="reg-header">
          <div class="logo"><img src="https://wap.mala.cn/mala/imgs/114.png"></div>
          <div>
            <h3 class="title" style="text-align: left;color:#20a0ff;margin-bottom:0;">欢迎注册认证</h3>
            <h3 class="title" style="text-align: left;font-size:16px;margin-top:10px;color:#666;margin-bottom:0">
              群众呼声麻辣问政</h3>
          </div>
        </div>

        <div class="step">
          <el-steps :active="postStatus" align-center>
            <el-step title="第一步" description="输入认证资料"></el-step>
            <el-step title="第二步" description="等待审核"></el-step>
            <el-step title="第三步" description="认证完成"></el-step>
          </el-steps>
        </div>
        <div class="warning"><p>认证类型为：<a href="javascript:">公安机关</a><a href="javascript:;">司法</a><a
          href="javascript:"
        >交通</a><a href="javascript:;">旅游</a><a href="javascript:">医院</a><a
          href="javascript:"
        >卫生</a><a href="javascript:;">市政</a><a href="javascript:">教育</a><a href="javascript:;">企业</a></p>
          <p>账号名一般为政府/机构/单位/企业的全称或简称，不能以其他不相干的注册名来申请认证。</p></div>
        <div class="from" v-loading="vloading" v-if="postStatus==0">
          <el-radio-group v-model="from.user_type" style="margin-bottom: 30px;">
            <el-radio-button label="2">机构认证</el-radio-button>
            <el-radio-button label="4">企业认证</el-radio-button>
          </el-radio-group>
          <el-divider content-position="left">{{ verify_text }}信息</el-divider>
          <div class="from-input">
            <div class="lable">{{ verify_text }}名称</div>
            <div class="input">
              <el-input type="input" :placeholder="`认证的${verify_text}名称`" v-model="from.verify_name"></el-input>
            </div>
          </div>
          <div class="from-input">
            <div class="lable">认证资料</div>
            <div class="input">
              <el-input type="input" :placeholder="`认证${verify_text}全称，将会显示在界面上`"
                        v-model="from.verify_profile"></el-input>
            </div>
          </div>
          <div class="from-input" style="align-items: flex-start">
            <div class="lable">认证公函</div>
            <div class="input">
              <el-upload
                :action="uploadUrl"
                list-type="picture-card"
                accept=".jpg,.jpeg,.png,.gif,.bmp"
                :before-upload="beforeUpload"
                :on-error="onError"
                :on-remove="onRemove"
                :on-success="onSuccess"
                :on-progress="onProgress"
                :multiple="true"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <p v-if="from.user_type==2">请下载填写“群众呼声”官方认证公函 <a href="https://www.mala.cn/mala/官方认证公函.doc"
                                                               style="color:#369" target="_blank">（点击此处下载）</a>，填写完整后加盖红色公章，上传清晰的公函扫描件。支持jpg、gif、png、bmp格式，大小不超过5M/张。
              </p>
              <p v-if="from.user_type==4">上传营业执照扫描件，最大5MB/张，仅支持jpg、gif、png、bmp格式。
              </p>
            </div>
          </div>
          <el-divider content-position="left">运营者信息</el-divider>

          <div class="from-input">
            <div class="lable">运营者姓名</div>
            <div class="input">
              <el-input type="input" placeholder="请输入您的真实姓名" style="width:160px;" v-model="from.user_name"></el-input>
            </div>
          </div>


          <div class="from-input">
            <div class="lable">运营者手机号码</div>
            <div class="input">
              <el-input type="input" placeholder="将作为登陆手机号" maxlength="11" v-model="from.user_phone"
                        style="width:200px;"></el-input>
            </div>
          </div>

          <div class="from-input">
            <div class="lable">QQ</div>
            <div class="input">
              <el-input type="input" placeholder="QQ" style="width:200px;" v-model="from.user_qq"></el-input>
            </div>
          </div>

          <div class="from-input" style="margin-bottom:45px;">
            <div class="lable">部门及职位</div>
            <div class="input">
              <el-input type="input" placeholder="部门及职位" v-model="from.user_bumen"></el-input>
            </div>
          </div>
          <el-divider content-position="left" >账号信息</el-divider>
          <div class="warning" style="border:1px solid #fe6c6f;width:500px;margin:20px auto;padding:10px;color:#fe6c6f;font-size:12px">可以输入已有的麻辣社区账号，若不存在将会自动注册，若存在将会自动同步认证。
          </div>
          <div class="from-input" >
            <div class="lable">请输入用户名</div>
            <div class="input">
              <el-input type="input" placeholder="请输入账号" style="width:240px;" v-model="from.username"></el-input>
            </div>
          </div>

          <div class="from-input" >
            <div class="lable">请输入密码</div>
            <div class="input">
              <el-input type="password" placeholder="请输入密码" style="width:240px;" v-model="from.password"></el-input>
            </div>
          </div>

          <div class="postButton" @click="step(2)">下一步</div>
        </div>
        <div v-else>
          <el-result icon="info" title="审核中"  v-if="verify_Status_Data.status==0">
            <template slot="extra">
              <div style="font-size:14px;color:#888;margin-bottom: 30px;">
                请耐心等待,请记住你的审核唯一编码:<span style="font-weight: bold;color:#20a0ff;font-size:18px;"> {{verify_code}} </span>
              </div>
              <el-button type="primary" size="medium" @click="gologin">返回</el-button>
            </template>
          </el-result>
          <el-result icon="success" title="已通过审核" subTitle="请耐心等待" v-else-if="verify_Status_Data.status==1">
            <template slot="extra">
              <el-button type="primary" size="medium" @click="gologin">立即登录</el-button>
              <el-button type="warning" size="medium" @click="reverify">继续认证</el-button>
            </template>
          </el-result>
          <el-result icon="error" title="已拒绝" :subTitle="`理由:${verify_Status_Data.status_msg}`"
                     v-else-if="verify_Status_Data.status==2">
            <template slot="extra">
              <el-button type="primary" size="medium" @click="reverify">重新认证</el-button>
            </template>
          </el-result>
        </div>
      </div>

    </div>
    <div class="tips" style="margin-top:40px;">
      <div style="color:#20a0ff;text-align: center;cursor: pointer" @click="gologin"><i class="el-icon-s-check"/> 登录机构
      </div>
      <div style="color:#999;text-align: center;margin-top:10px;">Powered by Mala' developer Xu Xiaolong</div>
      <div style="color:#999;margin-top:10px;text-align: center">Copyright@2003-2023 mala.cn all rights reserved</div>
    </div>
  </div>
</template>
<style lang="less">
.from {
  .el-divider__text {
    background: #f6f6f6;
  }

  .el-upload, .el-upload-list__item, .el-progress, .el-progress-circle {
    width: 100px !important;
    line-height: 100px;
    height: 100px !important;;
  }

  .input {
    .el-icon-upload-success {
      position: absolute;
      margin-top: 10px;
      right: 14px;
    }
  }

}
</style>
<script>
import {getVerifyStatus, postVerify, uploadImage} from '@/api/user'

export default {
  name: 'Reg',
  data() {
    return {
      postStatus: 0,
      vloading: false,
      uploadUrl: '',
      verify_text: '机构',
      from: {
        user_type: 2,
        verify_name: '',
        verify_profile: '',
        verify_img: [],
        user_name: '',
        user_phone: '',
        user_qq: '',
        user_bumen: ''
      },
      verify_Status_Data: [],
      pageLoading: true,
      verify_code:'',
    }
  },
  created() {
    this.uploadUrl = uploadImage()
    let verify_code = localStorage.getItem('verify_code')
    if (verify_code) {
      this.scode(verify_code);
      this.verify_code = verify_code
    } else {
      this.pageLoading = false
      this.postStatus = 0
    }

  },
  watch: {
    $route: {
      handler: function (route) {
        // this.redirect = route.query && route.query.redirect
      },
      immediate: true
    },
    'from.user_type': function (n) {
      if (n == 2) {
        this.verify_text = '机构'
      } else {
        this.verify_text = '企业'
      }
    }
  },

  methods: {
    scode(verify_code,t){
      getVerifyStatus({verify_code: verify_code}).then(r => {
        if (r.data.id > 0) {
          this.postStatus = 3
          this.pageLoading = false
          this.verify_Status_Data = r.data
        } else {
          if(t){
            this.$message.error('没有查询到相关记录')
          }
          this.postStatus = 0
          this.pageLoading = false
        }
      }, data => {
        this.postStatus = 0
        this.pageLoading = false

      })
    },
    gologin() {
      this.$router.push({path: '/index'})
    },
    searchVerify(){
      this.$prompt('请输入认证唯一编码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: ''
      }).then(({ value }) => {
        this.loading = true
        this.scode(value,1)
      }).catch(() => {
      })
    },
    reverify() {
      localStorage.setItem('verify_code', '');
      this.postStatus = 0
    },
    step() {
      this.vloading = true
      postVerify(this.from).then(r => {
        this.postStatus = 1;
        this.$set(this.verify_Status_Data, 'status', 0);
        localStorage.setItem('verify_code', r.data)
        this.verify_code = r.data
      },data=>{
        this.vloading = false
      })
    },
    onRemove(res, file) {
      this.$set(this.from, 'verify_img', file);
    },
    onError(err) {
      let myError = err.toString();
      myError = myError.replace("Error: ", "")
      myError = JSON.parse(myError);
      this.$message.error(myError.message)
    },

    onSuccess(res, file, fileList) {
      this.$set(this.from, 'verify_img', fileList);
    },
    onProgress(event, file, fileList) {
      console.log(event)
    },
    beforeUpload(file) {
      const isJPG =
        file.type == "image/jpeg" ||
        file.type == "image/png" ||
        file.type == "image/gif";
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isJPG) {
        this.$message.error('只能上传图片格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleLogin() {

    }
  }
}
</script>

<style lang="scss" scoped>
$bg: #ededed;
$dark_gray: #889aa4;
$light_gray: #000;
.step {
  margin-top: 40px;
}

.postButton {
  height: 55px;
  background: #FF801A;
  background-image: -webkit-linear-gradient(left, #20a0ff 1%, #71bbfe 100%);
  background-image: linear-gradient(90deg, #20a0ff 1%, #71bbfe 100%);
  box-shadow: 0 0.3125rem 0.9375rem 0 rgba(113, 187, 254, .43);
  border-radius: 5px;
  color: #fff;
  width: 400px;
  position: relative;
  font-size: 16px;
  text-align: center;
  margin: 60px auto;
  line-height: 55px;
  cursor: pointer;
}

.from {
  margin-top: 20px;
  background: #f6f6f6;
  padding: 20px;

  .from-input {
    display: flex;
    width: 600px;
    margin: 0 auto;
    margin-bottom: 25px;
    align-items: center;

    .lable {
      width: 140px;
      text-align: right;
      color: #777;
    }

    .input {
      margin-left: 20px;
      width: calc(100% - 160px);

      .textarea {
        width: 400px;
      }

      p {
        color: #777;
        font-size: 14px;
      }
    }
  }
}

.qrcode_login {
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;

  &:hover {
    .svg-icon {
      color: #07c160;
    }
  }

  .svg-icon {
    font-size: 40px;
    color: #666;
    border-bottom-left-radius: 80px;
  }

  .wechat_notice {
    width: 80px;
    background: #999;
    color: #fff;
    text-align: center;
    padding: 5px 5px;
    border-radius: 2px;
    position: absolute;
    right: 50px;
    top: 5px;
    font-size: 14px;;

    &:after {
      position: absolute;
      content: "";
      right: -15px;
      bottom: 6px;
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 8px solid #999;
    }
  }
}


.warning {
  margin-top: 30px;

  a {
    margin: 0 5px;
  }
}

.reg-header {
  display: flex;
  align-items: flex-end;
  padding-bottom: 25px;
  border-bottom: 1px solid #ddd;

  .logo {
    margin-bottom: -2px;
    margin-right: 20px;

    img {
      width: 80px;
    }
  }
}

.reg-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;

  .login-form {
    position: relative;
    width: 900px;
    max-width: 100%;
    padding: 15px 30px;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
    background: #fff;
    margin: 0 auto;
    margin-top: 20px;
    overflow: hidden;

    .login-route {
      position: absolute;
      right: 30px;
      top: 15px;
      color: #20a0ff;
      font-size: 14px;
      z-index: 100;
      cursor: pointer;
    }
    .login-route-2{
      position: absolute;
      right: 130px;
      top: 15px;
      color: #20a0ff;
      font-size: 14px;
      z-index: 100;
      cursor: pointer;
    }
    .wechat-qrcode {
      height: 250px;
      width: 250px;
      margin: 0 auto;
      text-align: center;
      margin-top: -20px;
      position: relative;

      .mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 250px;
        height: 250px;
        text-align: center;
        background: rgba(0, 0, 0, .8);
        font-size: 20px;
        color: #fff;
        line-height: 250px;

        span {
          color: #20a0ff;
          cursor: pointer;
        }
      }

      img, .default_qrcode {
        width: 250px;
        height: 250px
      }

      p {
        color: #7e8081;
        font-size: 16px;
        margin: 15px 0;
      }
    }
  }

  .tips {
    font-size: 14px;

    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: #666;
    position: absolute;
    vertical-align: middle;
    width: 30px;

    i {
      font-size: 20px;
      color: #666;
    }
  }

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
</style>
